<template>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        style="z-index:1;position:relative" width="854" height="200" viewBox="0 0 854 200">
        <g transform="translate(427, 100) scale(1, 1) translate(-427, -100)">

            <defs>
                <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stop-color="#B99300" />
                    <stop offset="100%" stop-color="#8CA600" />
                </linearGradient>
            </defs>

            <path d="" fill="url(#linear)" opacity="0.5">
                <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1"
                    calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s"
                    values="M0 0L 0 120Q 213.5 160 427 130T 854 155L 854 0 Z;M0 0L 0 145Q 213.5 160 427 140T 854 130L 854 0 Z;M0 0L 0 165Q 213.5 135 427 165T 854 130L 854 0 Z;M0 0L 0 120Q 213.5 160 427 130T 854 155L 854 0 Z">
                </animate>
            </path>
            <path d="" fill="url(#linear)" opacity="0.7">
                <animate attributeName="d" dur="20s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1"
                    calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-10s"
                    values="M0 0L 0 135Q 213.5 180 427 150T 854 160L 854 0 Z;M0 0L 0 150Q 213.5 120 427 120T 854 140L 854 0 Z;M0 0L 0 145Q 213.5 125 427 150T 854 165L 854 0 Z;M0 0L 0 135Q 213.5 180 427 150T 854 160L 854 0 Z">
                </animate>
            </path>
        </g>

        <text text-anchor="middle" alignment-baseline="middle" x="40%" y="40%" class="text" style="fill:#F8F8F8;"
            stroke="#none" stroke-width="10">
            欢迎,远方的客人 </text>
    </svg>
</template>

<script>
export default {
    name: 'WelcomeSvg',
}
</script>

<style>
.text {
    font-size: 70px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

.desc {
    font-size: 20px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
</style>